import {
  Row,
  Col,
  Descriptions,
  Upload,
  message,
  Tabs,
  Radio,
  Modal,
  Button,
  Form,
  Input,
  Empty,
  Image,
} from 'antd';
import * as React from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { history } from 'umi';
import request from '@/http';
import { any } from 'prop-types';
import Avatar from '@/pages/student/info/upload';

const Modify = (email: any) => {
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [formObject] = Form.useForm();

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = async () => {
    setConfirmLoading(true);
    try {
      const result: any = await request.get(
        '/api/student/changeEmail?email=' +
          formObject.getFieldsValue(true).email,
      );
      if (result.message == '成功!') {
        message.success(result.message);
        location.reload();
      } else {
        message.error(result.message);
      }
    } catch (e) {
      message.error('');
    }
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    });
  };

  const handleCancel = () => {
    setVisible(false);
  };
  return (
    <>
      <Button type="link" onClick={showModal}>
        修改
      </Button>
      <Modal
        title="修改邮箱"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <Form
          form={formObject}
          style={{ height: '30px', top: '-10px' }}
          name="nest-messages"
        >
          <Form.Item
            name="email"
            label="请录入邮箱地址："
            rules={[{ type: 'email', message: '请输入正确的邮箱' }]}
          >
            <Input defaultValue={email.email} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

const Modify2 = (phone: any) => {
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [formObject] = Form.useForm();

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = async () => {
    setConfirmLoading(true);
    try {
      const result: any = await request.get(
        '/api/student/changePhone?phone=' +
          formObject.getFieldsValue(true).phone,
      );
      if (result.message == '成功!') {
        message.success(result.message);
        location.reload();
      } else {
        message.error(result.message);
      }
    } catch (e) {
      message.error('');
    }
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    });
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  return (
    <>
      <Button type="link" onClick={showModal}>
        修改
      </Button>
      <Modal
        title="修改手机号码"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <Form
          form={formObject}
          style={{ height: '30px', top: '-10px' }}
          name="nest-messages"
        >
          <Form.Item
            label="请录入手机号码："
            name="phone"
            rules={[
              {
                pattern: new RegExp(
                  /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                  'g',
                ),
                message: '请输入正确的电话号码',
              },
            ]}
          >
            <Input defaultValue={phone.phone} />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default (Props: any) => {
  const [loading, setLoading] = useState('');
  const [imageUrl, setImageUrl] = useState('');
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );
  const { TabPane } = Tabs;
  const onChange = (e: any) => {
    setValues(e.target.value);
    if (e.target.value == 'team') {
      history.push('/student/info/team');
    }
    if (e.target.value == 'score') {
      history.push('/student/info/score');
    }
    console.log(e.target.value);
  };
  const [values, setValues] = useState(history.location.pathname.slice(14));
  const [desData, setDesData] = useState({
    stuName: any,
    userNo: any,
    idNo: any,
    sex: any,
    email: any,
    mobileNo: any,
    collegesName: any,
    majorName: any,
    gradeName: any,
    className: any,
    teaName: any,
    teacherMobileNo: any,
    logoUrl: any,
  });
  let logo = 'http://47.106.181.87:8086/logo/' + desData.logoUrl;
  let log: any = desData.logoUrl;
  const Logo = () => {
    if (log == '') {
      return (
        <Empty
          style={{
            margin: '30px 0 0 0',
          }}
          description={<span>未上传头像</span>}
        />
      );
    } else {
      return (
        <Image
          width={200}
          height={192}
          style={{
            borderRadius: '10px',
          }}
          src={logo}
        />
      );
    }
  };
  const Des = async (token: any) => {
    const result: any = await request.get('/api/student/queryStuInfo');
    if (result.success) {
      setDesData(result.data);
    }
  };

  React.useEffect(() => {
    Des('').finally();
  }, []);

  const idCard = {};
  let userIdent: any = desData.idNo;
  return (
    <>
      <Row
        justify="center"
        style={{
          minWidth: '1200px',
          height: '50%',
        }}
        gutter={50}
      >
        <Col
          style={{
            margin: 'auto',
            textAlign: 'center',
          }}
          span={8}
        >
          <div
            style={{
              width: '205px',
              height: '196px',
              // backgroundColor: 'red',
              border: '1px solid #95afc0',
              borderRadius: '10px',
              margin: '0px auto 10px',
            }}
          >
            <Logo />
          </div>
          <Avatar />
          <p
            style={{
              width: '300px',
              textAlign: 'start',
              fontSize: '12px',
              color: 'red',
              margin: 'auto',
            }}
          >
            提示：为确保顺利通过人脸识别进行打卡，请上传您的正脸图片，请勿选择遮挡图、美颜图。
          </p>
        </Col>
        <Col span={16}>
          <Descriptions
            extra
            labelStyle={{
              fontSize: '16px',
              marginBottom: '10%',
            }}
            contentStyle={{
              fontSize: '16px',
            }}
            title=""
          >
            <Descriptions.Item label="姓名">
              {desData.stuName}
            </Descriptions.Item>
            <Descriptions.Item label="学号">{desData.userNo}</Descriptions.Item>
            <Descriptions.Item label="身份证号码">
              <div
                style={{
                  width: '180px',
                  height: '30px',
                }}
                onMouseLeave={() => {
                  userIdent = userIdent.replace(/(\d{6})\d*(\d{4})/, '$1***$2');
                  console.log(
                    userIdent.replace(/(\d{6})\d*(\d{4})/, '$1***$2'),
                  );
                }}
                onMouseOver={() => {
                  userIdent = desData.idNo;
                  console.log(userIdent);
                }}
              >
                {userIdent}
              </div>
            </Descriptions.Item>
            <Descriptions.Item label="性别">{desData.sex}</Descriptions.Item>
            <Descriptions.Item label="邮箱地址">
              {desData.email}
              <Modify email={desData.email} />
            </Descriptions.Item>
            <Descriptions.Item label="手机号码">
              {desData.mobileNo}
              <Modify2 phone={desData.mobileNo} />
            </Descriptions.Item>
            <Descriptions.Item label="院系">
              {desData.collegesName}
            </Descriptions.Item>
            <Descriptions.Item label="专业">
              {desData.majorName}
            </Descriptions.Item>
            <Descriptions.Item label="年级">
              {desData.gradeName}
            </Descriptions.Item>
            <Descriptions.Item label="班级">
              {desData.className}
            </Descriptions.Item>
            <Descriptions.Item label="班主任">
              {desData.teaName}
            </Descriptions.Item>
            <Descriptions.Item label="班主任电话">
              {desData.teacherMobileNo}
            </Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>
      <Row
        style={{
          minWidth: '1200px',
          height: '10%',
        }}
        gutter={50}
      >
        <Col span={1} />
        <Col span={22}>
          <Radio.Group
            value={values}
            size="large"
            defaultValue="a"
            buttonStyle="solid"
            onChange={onChange}
          >
            <Radio.Button value="team">实训小组成员</Radio.Button>
            <Radio.Button value="score">项目得分</Radio.Button>
          </Radio.Group>
          <nav
            style={{
              width: '100%',
              height: '1px',
              backgroundColor: '#dfdfdf',
            }}
          />
        </Col>
        <Col span={1} />
      </Row>
      <Row
        style={{
          minWidth: '1200px',
          height: '40%',
        }}
      >
        <Col span={1} />
        <Col span={22}>{Props.children}</Col>
        <Col span={1} />
      </Row>
    </>
  );
};
